<template>
  <div class="app-container" :style="setBgColor(albumpic_big)">
    <!-- <img src="@/assets/shebei_images/BMD.jpg" alt=""> -->
    <div class="equipment">
      <x-tabs
        title="选择设备"
        :list="equipmentList"
        label="equipmentName"
        :shadow="false"
        :required="true"
        @tab-click="changeEquipmen"
      />
    </div>
    <div class="appBox">
      <!-- 列表数据 -->
      <div
        v-for="item in dataList"
        :key="item.id"
        class="video"
        @click="goDetail(item)"
      >
        <!-- src="http://47.105.140.96:8090/profile/upload/2022/01/20/936262b2-d867-4194-8a83-d5a446a5c892.mp4"  -->
        <video class="video-item" :src="item.url" />
        <div class="video-title-container">
          <div class="video-title">{{ item.title }}</div>
        </div>
      </div>
    </div>

    <!-- loading-->
    <div
      v-loading="showLoading"
      :style="showLoading ? 'height:200px' : 'height:0px'"
    />

    <!-- 空状态 -->
    <el-empty
      v-show="!showLoading && !dataList.length"
      description="暂无数据"
    />

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="pageNum"
      @current-change="changePage"
    />

    <div class="box"></div>
  </div>
</template>

<script>
import { videoList } from '@/api/course'
import { getEquipment } from '@/api/report'
import XTabs from '@/components/XTabs.vue'
export default {
  name: 'Course',
  components: {
    XTabs
  },
  data() {
    return {
      dataList: [],
      showLoading: false,

      total: 0, // 总习题数量
      pageNum: 1,
      pageSize: 15,

      equipmentList: [], // 设备列表
      equipment: {}, //当前设备
      // 当前背景展示的图片
      albumpic_big: '',

      topImg: {
        // 'PET/CT': require('../../assets/shebei_images/PETCT.jpg'),
        // 'SPECT/CT': require('../../assets/shebei_images/SPECT.jpg'),
        // 'PET/MR': require('../../assets/shebei_images/PETMR.jpg'),
        // 'BMD': require('../../assets/shebei_images/BMD.jpg'),
      }
    }
  },
  created() {
    this.getEquipmentData() //获取设备数据
  },

  methods: {
    setBgColor(bgColor) {
      if (bgColor === '' || bgColor === '' || bgColor === undefined) {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      } else {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      }
    },

    getList() {
      // 获取视频数据
      this.showLoading = true
      console.log(this.equipment.item)
      videoList({
        questionEquipmentId: this.equipment.item.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        console.log(process.env)
        this.dataList = res.rows.map((item) => {
          item.url = process.env.VUE_APP_BASE_IMG_URL + item.url
          return item
        })
        console.log('this.dataList', this.dataList)
        this.total = res.total
        this.showLoading = false
      })
    },

    // 切换页码
    changePage(pageNum) {
      // console.log(pageNum)
      this.pageNum = pageNum
      this.getList()
    },

    async getEquipmentData() {
      //获取设备数据
      let res = await getEquipment()
      console.log('获取设备数据', res)
      if (res.code == 200) {
        this.equipmentList = res.equipment.map((item) => {
          console.log(res.equipment)
          return { equipmentName: item.equipmentName, id: item.id }
        })
      }
    },

    // 跳转到详情
    goDetail(obj) {
      // console.log(obj)
      this.$router.push({
        name: 'CourseDetail',
        params: { id: obj.id }
      })
    },

    changeEquipmen(e) {
      //选择设备标题
      console.log('设备', e)
      this.equipment = e
      let str = e.item.equipmentName
      this.albumpic_big = this.topImg[str]
      this.getList() //获取视频数据
    }
  }
}
</script>

<style lang="scss" scoped>
.equipment {
  border-radius: 15px;
  background: #e5f5ff;
  box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  width: 96%;
  padding: 0 25px;
}
.video {
  display: block;
  position: relative;
  height: 220px;
  width: 30%;
  margin: 10px;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;

  .video-item {
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-color: #333333;
  }

  .video-title-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    color: #ffffff;
    letter-spacing: 0.1em;
    line-height: 20px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);

    .video-title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      -o-text-overflow: ellipsis;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

// 只适配支持hover的设备
@media (any-hover: hover) {
  .video:hover {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 12px;
  }
}

.appBox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  box-sizing: border-box;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 7px 7px 15px #bebebe, -15px -7px 15px #f7f2f2;
  margin-top: 25px;
}

.video {
  width: 95%;
}

.app-container {
  min-height: calc(100vh - 60px);
  box-sizing: border-box;
  // background: url('../../assets/shebei_images/BMD.jpg') center center no-repeat;
  width: 100%;
  background-size: 100% 100% !important;

  .tabs-container {
    background-color: rgba(0, 0, 0, 0);
  }
}

.el-loading-mask {
  background-color: rgba(0, 0, 0, 0);
}
</style>
